<template>
	<div class="thePage flex-column">
		<div class="pg-title60">实习测评</div>
		<div class="list flex-column overflow-y">
			<div class="item-box flex-around" v-for="(item, i) in listData" :key="i">
				<img class="avatar" :src="item.avatar || defaultAvatar" />
				<div class="flex-column ml15 flex-1">
					<div class="teacherName">{{ item.teacherName }}</div>
					<div class="teacherType">{{ item.teacherType }}</div>
				</div>
				<div class="flex-right ">
					<div class="evalution " @click="onEvaluation()" :class="`status${item.status}`">{{ item.status == 0 ? '待评价' : '已评价' }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'EvalutionList',
	data() {
		return {
			defaultAvatar: require('@/pics/default_avatar.png'),
			listData: [
				{
					avatar: '',
					teacherName: '张晓花',
					teacherType: '实习指导老师',
					status: 0
				},
				{
					avatar: '',
					teacherName: '施小芸',
					teacherType: '论文指导老师',
					status: 0
				},
				{
					avatar: '',
					teacherName: '龚琼花',
					teacherType: '实习指导老师',
					status: 0
				},
				{
					avatar: '',
					teacherName: '姚国盛',
					teacherType: '论文指导老师',
					status: 1
				},
				{
					avatar: '',
					teacherName: '方郑宇',
					teacherType: '实习指导老师',
					status: 1
				},
				{
					avatar: '',
					teacherName: '姚国盛',
					teacherType: '论文指导老师',
					status: 1
				},
				{
					avatar: '',
					teacherName: '姚国盛',
					teacherType: '论文指导老师',
					status: 1
				},
				{
					avatar: '',
					teacherName: '方郑宇',
					teacherType: '实习指导老师',
					status: 1
				},
				{
					avatar: '',
					teacherName: '姚国盛',
					teacherType: '论文指导老师',
					status: 1
				}
			],
			visiblePopup: false //提交确认弹窗显示
		};
	},

	methods: {
		onEvaluation(item) {
			this.$router.push({ name: 'evaluationEdit' });
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	.item-box {
		.teacherName {
			padding: 5px;
			font-size: 15px;
			font-weight: bold;
			color: #3a3a3a;
		}
		.teacherType {
			padding: 5px;
			font-size: 12px;
			font-weight: 400;
			color: #b0b0b0;
		}
		.evalution {
			width: 63px;
			border-radius: 10px;
			font-size: 12px;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			line-height: 22px;
			letter-spacing: 2px;
		}
		.status0 {
			background: #fd8a23;
		}
		.status1 {
			background: #8c8c8c;
		}
	}
}
</style>
